<template>
  <div class="home-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="首页" fixed>
      <template #right>
        <van-icon name="ellipsis" size="18" />
        <van-icon name="contact" size="18" style="margin-left: 16px;" />
      </template>
    </van-nav-bar>

    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 轮播图区域 -->
      <div class="banner-section">
        <van-swipe :autoplay="3000" indicator-color="white" class="banner-swipe">
          <van-swipe-item v-for="(notice, index) in notices" :key="index" class="banner-item">
            <div class="banner-content">
              <h2>{{ notice.title }}</h2>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 门诊服务区域 -->
      <div class="service-section">
        <div class="section-title">
          <span class="title-dash"></span>
          <span class="title-text">门诊服务</span>
        </div>

        <!-- 主要服务卡片 -->
        <div class="main-cards">
          <div class="service-card appointment-card" @click="handleAppointment">
            <div class="card-content">
              <h3>预约挂号</h3>
              <p>在线挂号预约</p>
            </div>
            <div class="card-icon appointment-icon"></div>
          </div>

          <div class="service-card recharge-card" @click="handleRecharge">
            <div class="card-content">
              <h3>在线充值</h3>
              <p>就诊卡预存充值</p>
            </div>
            <div class="card-icon recharge-icon"></div>
          </div>
        </div>

        <!-- 服务网格 -->
        <van-grid :column-num="4" :border="false" class="service-grid">
          <van-grid-item v-for="service in services" :key="service.id" :icon="service.icon" :text="service.name"
            @click="handleServiceClick(service)" class="service-item" />
        </van-grid>

        <!-- 医院介绍入口 -->
        <div class="section-title" style="margin-top: 20px;">
          <span class="title-dash"></span>
          <span class="title-text">医院概况</span>
        </div>
        <van-grid :column-num="4" :border="false" class="service-grid">
          <van-grid-item 
            icon="description"
            text="医院介绍"
            @click="goHospitalIntro"
            class="service-item"/>
        </van-grid>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="activeTab" fixed>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/profile">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { api } from '@/api'

const router = useRouter()
const activeTab = ref(0)

// 轮播图数据
const notices = ref([
  { title: '停诊通知' },
  { title: '最新公告' },
  { title: '服务提醒' }
])

// 服务列表数据
const services = ref([
  { id: 1, name: '候诊查询', icon: 'clock-o' },
  { id: 2, name: '自助缴费', icon: 'gold-coin-o' },
  { id: 3, name: '门诊费用', icon: 'balance-list-o' },
  { id: 4, name: '在线退款', icon: 'refund-o' },
  { id: 5, name: '预约须知', icon: 'description' },
  { id: 6, name: '测试预约排班', icon: 'calendar-o' },
  // { id: 7, name: '病历查询', icon: 'records' },
  // { id: 8, name: '复诊配药', icon: 'medicines' },
  // { id: 9, name: '核酸检测', icon: 'lab-o' },
  // { id: 10, name: '体检服务', icon: 'health' },
  // { id: 11, name: '电子发票', icon: 'invoice' }
])

// 事件处理
const handleAppointment = () => {
  console.log('预约挂号')
  // 跳转到预约须知确认页面
  router.push('/appointments/notice-confirm')
}

const handleRecharge = () => {
  console.log('在线充值')
  // TODO: 调用充值API
}

const handleServiceClick = (service: any) => {
  console.log('点击服务:', service.name)
  // 如果是候诊查询，直接跳转到候诊查询页面
  if (service.id === 1) {
    router.push('/waiting-query')
  }
  // 跳转到自助缴费
  if (service.name === '自助缴费' || service.id === 2) {
    router.push('/zhifubao/self-service-payment')
    return
  }
  // 跳转到门诊费用
  if (service.name === '门诊费用' || service.id === 3) {
    router.push('/outpatient-expenses')
    return
  }
  // 跳转到预约须知
  if (service.name === '预约须知' || service.id === 5) {
    router.push('/appointment-notice')
    return
  }
  // 跳转到测试预约排班页面
  if (service.name === '测试预约排班' || service.id === 6) {
    router.push('/appointments/schedule/1?appointmentId=1')
    return
  }
  // TODO: 根据服务类型调用对应API
  
}

// 跳转到自助缴费页面
const goToSelfServicePayment = () => {
  router.push('/zhifubao/self-service-payment')
}

// 跳转到支付页面（需要传递支付参数）
const goToPayment = (paymentParams?: any) => {
  if (paymentParams) {
    router.push({
      path: '/zhifubao/zhifu',
      query: paymentParams
    })
  } else {
    router.push('/zhifubao/zhifu')
  }
}

const goHospitalIntro = () => {
  router.push('/hospital-intro')
}

onMounted(() => {
  // 页面加载时使用默认数据，避免调用未开发的接口
  // loadNotices()
  // loadServices()
})

// API调用方法
const loadNotices = async () => {
  try {
    const response = await api.getNotices()
    if (response.data.list) {
      notices.value = response.data.list.map(item => ({
        title: item.title
      }))
    }
  } catch (error) {
    console.error('获取公告失败:', error)
    // 使用默认数据
    notices.value = [
      { title: '停诊通知' },
      { title: '最新公告' },
      { title: '服务提醒' }
    ]
  }
}

const loadServices = async () => {
  try {
    const response = await api.getServices()
    if (response.data.gridServices) {
      services.value = response.data.gridServices.map(item => ({
        id: item.id,
        name: item.name,
        icon: item.icon
      }))
    }
  } catch (error) {
    console.error('获取服务列表失败:', error)
    // 使用默认数据
    services.value = [
      { id: 1, name: '候诊查询', icon: 'clock-o' },
      { id: 2, name: '自助缴费', icon: 'gold-coin-o' },
      { id: 3, name: '门诊费用', icon: 'balance-list-o' },
      { id: 4, name: '在线退款', icon: 'refund-o' },
      { id: 5, name: '预约须知', icon: 'description' },
      // { id: 6, name: '报告查询', icon: 'description' },
      // { id: 7, name: '病历查询', icon: 'records' },
      // { id: 8, name: '复诊配药', icon: 'medicines' },
      // { id: 9, name: '核酸检测', icon: 'lab-o' },
      // { id: 10, name: '体检服务', icon: 'health' },
      // { id: 11, name: '电子发票', icon: 'invoice' }
    ]
  }
}
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px;
  /* 为底部导航栏留出空间 */
}

.content {
  padding-top: 46px;
  /* 为顶部导航栏留出空间 */
}

/* 轮播图样式 */
.banner-section {
  margin: 0 16px 16px;
}

.banner-swipe {
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
}

.banner-item {
  background: linear-gradient(135deg, #1989fa 0%, #1976d2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-content h2 {
  color: white;
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

/* 门诊服务区域 */
.service-section {
  margin: 0 16px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.title-dash {
  width: 4px;
  height: 16px;
  background-color: #1989fa;
  margin-right: 8px;
  border-radius: 2px;
}

.title-text {
  font-size: 16px;
  font-weight: 500;
  color: #323233;
}

/* 主要服务卡片 */
.main-cards {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.service-card {
  flex: 1;
  height: 80px;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.appointment-card {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
}

.recharge-card {
  background: linear-gradient(135deg, #51cf66 0%, #69db7c 100%);
}

.card-content h3 {
  color: white;
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 4px 0;
}

.card-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  margin: 0;
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
}

/* 服务网格 */
.service-grid {
  background: white;
  border-radius: 8px;
  padding: 16px 0;
}

.service-item {
  padding: 12px 0;
}

/* 底部导航栏样式调整 */
:deep(.van-tabbar) {
  background-color: white;
  border-top: 1px solid #ebedf0;
}

:deep(.van-tabbar-item--active) {
  color: #1989fa;
}
</style>